<template>
  <div class="app-container">
    <div style="padding: 30px 0 10px;font-size: 14px;">共<span style="color:#f49352;">{{ total }}</span>种角色</div>
    <el-table
      key="table0"
      v-loading="listLoading"
      :data="list"
      stripe
      style="width: 100%"
      :row-style="{ background: '#f2f2f2' }"
    >
      <div slot="empty" class="m-empty-box">
        <div class="mar" style="width: 168px;height: 180px;">
          <img src="https://www.jianyigongxiang.com/public/membercard/empty.png" class="wh100">
        </div>
        <div class="title">暂无数据</div>
      </div>
      <el-table-column label="角色名称" width="200px">
        <template slot-scope="{row}">
          <div style="display:flex;">
            <span style="height:30px; line-height: 30px;">{{ row.title }}</span>
          </div>
        </template>
      </el-table-column>

      <el-table-column label="角色属性">
        <template slot-scope="{row}">
          <span>{{ row.brief }}</span>
        </template>
      </el-table-column>

      <el-table-column label="人数">
        <template slot-scope="{row}">
          <span>{{ row.count }}</span>
        </template>
      </el-table-column>

      <el-table-column align="center" label="操作">
        <template slot-scope="{row}">
          <router-link :to="'/system/roleDetail?id='+row.id">
            <el-button type="primary" size="small" icon="el-icon-edit">
              详情
            </el-button>
          </router-link>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="listQuery.page"
      :limit.sync="listQuery.limit"
      @pagination="getList"
    />
  </div>
</template>

<script>
// import fetchList from '@/api/article'
import Pagination from '@/components/Pagination'
import { getXuan } from '@/utils/limits.js'
import { mapGetters } from 'vuex'
import { grouplist } from '@/api/group'; // Secondary package based on el-pagination

export default {
  name: 'ArticleList',
  components: {
    Pagination
  },
  filters: {
    statusFilter(status) {
      const statusMap = {
        published: 'success',
        draft: 'info',
        deleted: 'danger'
      }
      return statusMap[status]
    }
  },
  data() {
    return {
      list: null,
      total: 0,
      listLoading: true,
      listQuery: {
        page: 1,
        limit: 10
      },
      status: {},
      role: {},
      roleIndex: '',
      statusIndex: 0
    }
  },
  computed: {
    ...mapGetters([
      'permission_routes',
      'roles'
    ])
  },
  created() {
    var xuanList = [{
      name: '角色权限',
      url: '/system/memberRBAC',
      pd: true
    }]
    var xuanList1 = getXuan(xuanList, this.roles)
    this.$store.dispatch('user/changeXuan', {
      key: 'xuanList',
      value: xuanList1
    })
    this.$store.dispatch('user/changeXuan', {
      key: 'xuan',
      value: 0
    })

    this.getList()
  },
  methods: {
    getList() {
      this.listLoading = true
      grouplist({
        'page':this.listQuery.page,
        'limit':this.listQuery.limit,
      }).then(response => {
        const {
          data
        } = response
        console.log(response);
        if(response.code == 0){
          this.total = response.data.total
          this.list = response.data.data
          this.listLoading = false
        }
      }).catch(error => {
        console.log(error)
        this.loading = false
      })
      // var list = { 'errno': 0, 'error': 'ok', 'data': { 'total': 10, 'list': [{ 'id': '5', 'code': 'adviser', 'code_desc': '会籍顾问', 'name': '会籍顾问', 'sys_default': '1', 'mem_count': '4' }, { 'id': '2', 'code': 'coach', 'code_desc': '老师', 'name': '老师', 'sys_default': '1', 'mem_count': '13' }, { 'id': '9', 'code': 'coach', 'code_desc': '老师', 'name': '兼职老师', 'sys_default': '0', 'mem_count': '22' }, { 'id': '6', 'code': 'other', 'code_desc': '其它', 'name': '私教', 'sys_default': '0', 'mem_count': '10' }, { 'id': '7', 'code': 'other', 'code_desc': '其它', 'name': '网络部超管', 'sys_default': '0', 'mem_count': '4' }, { 'id': '10', 'code': 'other', 'code_desc': '其它', 'name': '财务', 'sys_default': '0', 'mem_count': '1' }, { 'id': '11', 'code': 'other', 'code_desc': '其它', 'name': '销售', 'sys_default': '0', 'mem_count': '0' }, { 'id': '4', 'code': 'reception', 'code_desc': '前台', 'name': '前台', 'sys_default': '1', 'mem_count': '9' }, { 'id': '3', 'code': 'shopkeeper', 'code_desc': '店长', 'name': '店长', 'sys_default': '1', 'mem_count': '5' }, { 'id': '1', 'code': 'superadmin', 'code_desc': '超级管理员', 'name': '超级管理员', 'sys_default': '1', 'mem_count': '1' }] }}

    },
    handleSelectionChange(val) {
      console.log(val.length)
      this.xuancount = val.length
      this.multipleSelection = val
    }
  }
}
</script>

<style scoped>
.app-container {
  padding: 0 63px 20px;
}
.edit-input {
  padding-right: 100px;
}

.cancel-btn {
  position: absolute;
  right: 15px;
  top: 10px;
}

.typelists {
  cursor: pointer;
  margin-right: 30px;
  margin-bottom: 10px;
  vertical-align: middle;
  font-size: 12px;
}

.typexuan {
  color: #41c3a8;
}

::v-deep .el-table--enable-row-hover .el-table__body tr:hover > td {
  background-color: #616b74;
  color: #fff;
}

::v-deep .el-table--enable-row-hover .el-table__body tr > td {
  color: #000;
}

/* ::v-deep .el-table__body .el-table__row.hover-row td {
  background-color: #616b74
} */
</style>
